<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">提现</block>
			<block slot="right" @click="navigateFile">记录</block>
		</cu-custom>
		<view class="draw-content">
			<view class="content">
				<view class="title">
					提现金额
				</view>
				<view class="set-val">
					<view class="">￥</view>
					<input type="digit" placeholder="请输入提现金额" placeholder-class="placeholder" v-model="price" />
				</view>
				<view class="price-info">
					<text>当前余额 {{hasMoney}} 元，</text>
					<text @click="allPrice">全部提现</text>
				</view>
				<view class="change-truth">
					<view class="">
						选择提现方式
					</view>
					<!-- v-if="!noBank" -->
					<view class="info" @click="showGoods">
						<image :src="nowTruthBank.bank_logo" mode=""></image>
						<text>{{nowTruthBank.bankName}}<text v-if="nowTruthBank.showCode">({{nowTruthBank.showCode}})</text></text>
					</view>
					<!-- <view class="info" v-if="noBank" @click="goBankCard">
						<text>请先添加银行卡</text>
					</view> -->
					<text class="lg text-gray" :class="'cuIcon-right'"></text>
				</view>
				<view class="parse" v-html="tipsMessage">
					<!-- <u-parse :content="tipsMessage" v-if="tipsMessage!=''" @preview="preview" @navigate="navigate"></u-parse> -->
				</view>

				<view class="submit" @click="submit">
					确认提现
				</view>
			</view>
			<view class="tips">
				免责申明：请认真核对以上信息，如因本人操作问题导致资金损失，公司不承担任何责任
			</view>
		</view>

		<view class="layer-cont" v-if="bottomStatus" @click="hide"></view>
		<view :class="bottomStatus?'layer-goods active':'layer-goods'">
			<view class="title-bottom">
				选择提现方式
			</view>
			<view class="bank-list">
				<view class="item" v-for="(item,index) in payModes" :key="index" @click="changeMode" :data-id="item.id">
					<image :src="item.bank_logo" mode=""></image>
					<view class="">
						{{item.bankName}}<text v-if="item.showCode">({{item.showCode}})</text>
					</view>
					<image :src="item.isTruth==1?'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/t_l.png':'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/t_d.png'"
					 mode=""></image>
				</view>
				<view class="item" @click="goBankCard">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/addbank.png" mode=""></image>
					<view class="">添加银行卡</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../utils/utilBank.js')
	import cuCustom from "./component/cu-custom.vue"
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			cuCustom,
			uParse
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				userInfo: {},
				tipsMessage: [],
				price: '',
				payModes: [{
					bank_logo: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/weixin-friend.png',
					bankName: '微信零钱提现',
					id: "weixin",
					isTruth: 1
				}],
				nowTruthBank: {},
				bottomStatus: false,
				hasMoney: '',
				noBank: false,
				
				isFlag: true
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getTip();
			this.getUserMoney()
		},
		onShow() {
			this.getBank('action');
		},
		methods: {
			hide() {
				this.bottomStatus = false
			},
			// 添加银行卡
			goBankCard() {
				uni.navigateTo({
					url: '/pages/addbank'
				});
			},
			getUserMoney() {
				var that = this;
				this.$request({
					url: '/Withdraws/getUserMoney',
					success: res => {
						if (res.data.status == 1) {
							that.hasMoney = res.data.data.user_money
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			allPrice() {
				this.price = Number(this.userInfo.user_money)
			},
			changeMode(e) {
				this.payModes.forEach(item => {
					item['isTruth'] = 0
					if (item.id == e.currentTarget.dataset.id) {
						item['isTruth'] = 1
						this.nowTruthBank = item
					}
				})
				this.bottomStatus = false
			},
			// 提交
			submit() {
				var that = this
				var withdrawMoney = that.price
				var userMoney = Number(that.hasMoney)
				var bankkInfo = that.nowTruthBank;
				// 提现类型
				var withdraw_type = bankkInfo.id == 'weixin' ? '3' : '1'
				var withdraw_type_name = bankkInfo.id == 'weixin' ? '微信提现' : '银行卡提现'
				if (withdrawMoney > userMoney) {
					uni.showToast({
						title: '金额不能超过可提现金额',
						icon: 'none'
					})
					return false
				} else if (bankkInfo.id == 'weixin' && withdrawMoney < 1) {
					uni.showToast({
						title: '微信提现不能低于1元',
						icon: 'none'
					})
					return false
				}else if (bankkInfo.id != 'weixin' && withdrawMoney < 10) {
					uni.showToast({
						title: '提现金额不能低于10元',
						icon: 'none'
					})
					return false
				}

				var zhifubao = 'zhifubao';
				var submitData = {
					'withdraw_type': withdraw_type,
					'withdraw_type_name': withdraw_type_name,
					'withdraw_money': withdrawMoney,
					'bank_id': bankkInfo ? bankkInfo.bank_id : '', // 银行id
					'bank_no': bankkInfo ? bankkInfo.bank_code : '',
					'bank_name': bankkInfo ? bankkInfo.bankName : '',
					'real_name': bankkInfo ? bankkInfo.user_name : '',
					'card_number': bankkInfo ? bankkInfo.bank_number : '',
					'zhifubao': zhifubao,
					'user_id': that.userInfo.id,
					'phone': that.userInfo.phone
				}
				if(that.isFlag){
					that.isFlag = false
					this.$request({
						url: '/Withdraws/getMoneyToWallet',
						data: submitData,
						success: res => {
							if (res.data.status == 1) {
								uni.hideLoading()
								var user = that.userInfo
								user.user_money = Number(userMoney - Number(withdrawMoney)).toFixed(2)
								that.hasMoney = user.user_money
								uni.setStorageSync('userInfo', user)
								uni.showModal({
									content:res.data.message,
									showCancel:false,
									success() {
										that.isFlag = true
									}
								})
							}
						},
						fail: () => {
							that.isFlag = true
						},
						complete: () => {}
					});
				} 
			},
			// 选择器
			showGoods() {
				this.bottomStatus = true
			},
			preview() {

			},
			navigate() {

			},
			navigateFile() {
				uni.navigateTo({
					url: '/pages/drawRecord'
				});
			},
			getBank(status) {
				var that = this;
				// 重新取值时，数据恢复一下
				if (status == 'action') {
					that.payModes = that.payModes.splice(0, 1)
				}
				this.$request({
					url: '/user/getUserBankList',
					data: {
						user_id: that.userInfo.id
					},
					success: res => {
						if (res.data.status == 1) {
							var thisData = res.data.data
							if (thisData.length > 0) {
								thisData.forEach((item, index) => {
									var info = util.bankCardAttribution(item.bank_number)
									item['isTruth'] = 0
									if (info == 'error') {
										item.bank_number = '无效银行卡'
									} else {
										item.bank_number = item.bank_number;
										item.bankName = info.bankName
										item.bankType = info.cardTypeName
										item.showCode = item.bank_number.slice(item.bank_number.length - 4, item.bank_number.length)
									}
									that.payModes.push(item)
								})
							} else {
								that.noBank = true
							}
							that.nowTruthBank = that.payModes[0]
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getTip() {
				var that = this;
				this.$request({
					url: '/Withdraws/tipNew',
					success: res => {
						if (res.data.status == 1) {
							that.tipsMessage = res.data.message
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>


<style>
	.placeholder {
		color: #999;
		font-size: 33rpx;
	}

	page {
		background: #f5f5f5;
	}
</style>
<style scoped>
	@import url("../components/u-parse/u-parse.css");


	.draw-content {
		width: 100%;
		padding: 0 24rpx 40rpx;
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 8rpx;
		margin-top: 50rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}

	.set-val {
		width: 100%;
		/* padding: 30rpx 0; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom: solid 1rpx #efefef;
	}

	.set-val>view {
		color: #333333;
		font-size: 26rpx;
		font-weight: bold;
		margin-right: 25rpx;
	}

	.set-val>input {
		flex: 1;
		height: 120rpx;
		font-size: 40rpx;
		color: #333;
		font-weight: bold;
	}

	.price-info {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 24rpx 0;
	}

	.price-info>text:nth-child(1) {
		font-size: 24rpx;
		color: #999999;
	}

	.price-info>text:nth-child(2) {
		font-size: 24rpx;
		color: #0099ff;
	}

	.change-truth {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 1rpx #efefef;
	}

	.change-truth>view:nth-child(1) {
		width: 160rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.change-truth>view:nth-child(2) {
		flex: 1;
		height: 92rpx;
	}

	.change-truth .info {
		display: flex;
		align-items: center;

	}

	.change-truth .info image {
		width: 44rpx;
		height: 44rpx;
		margin-right: 10rpx;
	}

	.change-truth .info text {
		font-size: 28rpx;
		/* font-weight: bold; */
		color: #333333;
	}

	.parse {
		padding: 26rpx 0;
		width: 100%;
		font-size: 24rpx;
		line-height: 38rpx;
	}

	.parse p {
		font-size: 26rpx;
	}

	.submit {
		width: 560rpx;
		height: 88rpx;
		background-color: #0099ff;
		border-radius: 8rpx;
		font-size: 36rpx;
		line-height: 88rpx;
		color: #ffffff;
		text-align: center;
		margin: 0 auto;
	}

	.tips {
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx;
		font-size: 20rpx;
		color: #999999;
		line-height: 30rpx;
	}

	.layer-cont {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 2;
	}

	.layer-goods {
		width: 100%;
		position: fixed;
		bottom: -400rpx;
		max-height: 400rpx;
		left: 0;
		background: #fff;
		z-index: 3;
		transition: all 0.5s;
		border-radius: 8rpx 8rpx 0 0;
		display: flex;
		flex-direction: column;
	}

	.layer-goods.active {
		bottom: 0 !important;
	}

	.title-bottom {
		height: 86rpx;
		width: 100%;
		line-height: 86rpx;
		padding-left: 24rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #333333;
		border-bottom: solid 1rpx #efefef;
		font-weight: bold;
	}

	.bank-list {
		flex: 1;
		width: 100%;
		overflow-y: scroll;
		padding: 0 24rpx;
	}

	.bank-list .item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 1rpx #efefef;
	}

	.bank-list .item image:nth-child(1) {
		width: 44rpx;
		height: 44rpx;
		margin-right: 20rpx;
	}

	.bank-list .item view {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	.bank-list .item image:nth-child(3) {
		width: 32rpx;
		height: 32rpx;
	}
</style>

<style>
	.parse {
		font-size: 22rpx;
		color: #666666;
		line-height: 34rpx;
	}
</style>
